<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ui/fancybox/jquery.fancybox-1.3.4.css"
	type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="ui/easyui/themes/default/easyui.css" />
<script src="ui/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src='ui/bootstrap/js/bootstrap-tab.js'></script>
<script type="text/javascript" src='scripts/vendor/knockout-2.0.0.js'></script>
<script type="text/javascript" src='scripts/vendor/mustache.js'></script>
<script type="text/javascript" src='scripts/vendor/jquery.form.js'></script>
<script charset="utf-8" src="ui/fancybox/jquery.fancybox-1.3.4.js"></script>
<style type="text/css">
.pp input{ width:30px; }
</style>
<title>查看</title>
</head>
<body>
	<div class="row">

		<div id="homeworks" class="span12 " data-bind="foreach: handins">
			<div class="span7">
				<p data-bind="with: person" class="alert alert-info">
					<span data-bind="text: showName"></span>&nbsp;&nbsp;<span
						data-bind="text : $parent.time"></span>
				</p>

				<div class="clearfix" data-bind="html: content"></div>
				<div class="clearfix">
					<span data-bind="ifnot: hasScore"> 
					<select class="input-mini" data-bind="options: scores, event:{change: function(data,event){scoreIt(data,event);}}, optionsCaption: '打分'">
					</select> 
					</span> 
					<span data-bind="if: hasScore"> 
					分数为：<span data-bind="text:score" class="label label-success"></span>
					</span>&nbsp;&nbsp;
					<a data-bind="click : comment" href="javascript:void(0);">评论</a>
					<div class="clearfix">
						<ul data-bind="foreach:  comments">
							<li
								data-bind="event:{mouseover:$parent.showReply, mouseout:$parent.hideReply}">
								<span data-bind="text:content"></span>&nbsp;&nbsp;
								(<a data-bind="attr: { href: person_space}"><span data-bind="text:person().showName"></span></a><span data-bind="text:time"></span>)
								<span>
								<a class="hide" data-bind="event : {click: $parent.comment}" href="javascript:void(0);">回复</a>
								</span>
							</li>
						</ul>
						<div data-bind="visible: showPager"><div class="pp" data-bind="pagination: id"></div></div>
					</div>
				</div>
				<hr />
			</div>

		</div>

	</div>

	<script type="text/javascript">
		var pageSize = 10;
		;
		function PersonModel(person) {
			var self = this;

			self.id = ko.observable(person.id);
			self.version = ko.observable(person.version);
			self.showName = ko.observable(person.showName);
			self.signature = ko.observable(person.signature);
		};

		function CommentModel(comment) {
			var self = this;
			self.id = ko.observable(comment.id);
			self.content = ko.observable(comment.content);
			self.handin = ko.observable(new HandinModel(comment.handin));
			self.person = ko.observable(new PersonModel(comment.person));
			self.who = ko.observable(comment.person.showName);
			self.time = ko.observable(format_time(comment.time));
			self.person_space = ko.observable('person/space.action?pid=' + self.person().id());
		};

		;
		function HandinModel(handin) {
			var self = this;
			self.id = ko.observable(handin.id);
			self.content = ko.observable(handin.content);
			self.score = ko.observable(handin.score);
			self.hasScore = ko.computed(function() {
				return self.score() > 0;
			});
			self.time = ko.observable(format_time(handin.time));
			self.person = ko.observable(handin.person);
			//评论
			self.comment = function(data, event) {
				facybox(self, self.id());
			};
			
			//评论
			self.comments = ko.observableArray([]);
			self.showPager = ko.observable(false);
			
			
			//打分
			self.scores = ko.observableArray([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]);
			self.scoreIt = function(data, event) {
				var score = $(event.currentTarget).val();
				if ('change' == event.originalEvent.type) {
					if (Number(score) && Number(score) > 0) {
						score_(handin.id, score, self);
					}
				}
			};
	
			self.showReply = function(data, event) {//显示“回复”二字
				$(event.currentTarget).find('a:first-child').show();
			};
			self.hideReply = function(data, event) {
				$(event.currentTarget).find('a:first-child').hide();
			}
		};

		//页面ViewModel
		function AppView(data) {
			var self = this;
			self.handins = ko.observableArray([]);
		};

		appView = new AppView([]);

		$(function() {
			$.ajaxSettings.async = false;
			var url = "course/json/get-homeworks.action?tid=${param.tid}"
			$.getJSON(url, function(json) {
				if(json.success){
					init_App(json.handins)
				}else{
					alert('加载数据失败');
				}
			});
			
			
		});

		
		function init_App(handins){
			$.each(handins, function(i, v) {
				var hm = new HandinModel(v);
				var comments = get_comments(hm.id(), 1, 10);
				var comments_total = total_of_comments(hm.id());
				hm.showPager(comments_total > 10);
				$.each(comments, function(i, v){
					hm.comments.push(new CommentModel(v));
				});
				appView.handins.push(hm);
			});
			ko.applyBindings(appView);
		}
		
		
		
		
		//评论框
		function facybox(model, handId) {
			$.fancybox(Mustache.render($('#boxTem').html(), { handid : handId }));
			$('#commit').submit(function() {
				$(this).ajaxSubmit(function(json) {
					if (json.success) {
						model.comments.push(new CommentModel(json.comment));
						$.fancybox.close();
					} else {
						alert('传送数据失败，试试刷新页面');
					}
				});
				return false;
			});
		}
		//打分
		function score_(handid, score, self) {
			var url = 'course/score-homework.action?handid=' + handid
					+ '&score=' + score;
			$.getJSON(url, function(json) {
				if (json.success) {
					self.score(json.score);
				} else {
					$.fancybox('加载失败');
				}
			});
		}

		//得到作业的评论
		function get_comments(handid, page_num, page_size) {
			var url = "course/json/get-homework-comments.action?handid="
					+ handid + "&pageSize=" + page_size + "&pageNumber="
					+ page_num;

			var results = null;
			$.getJSON(url, function(json) {
				if (json.success) {
					results = json.comments;
				}
			});
			return results;
		}
		
		function total_of_comments(handid){
			var url = 'course/json/get-homework-comment-total.action?handid=' + handid;
			var result = 0;
			$.getJSON(url, function(json){
				if(json.success){
					result = json.total;
				}
			});
			return result;
		}
		
		//分页
		ko.bindingHandlers.pagination = {
			    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
			    	var handid = ko.utils.unwrapObservable(valueAccessor());
			    	var total = total_of_comments(handid);
			    	if(total > pageSize){
			    		var ppid = "p" + handid;
				    	$(element).attr('id', ppid);
				    	$('#' + ppid).pagination({
							total : total,
							pageSize : pageSize,
							showPageList : false,
							onSelectPage :  function(pageNumber, pageSize) {
								viewModel.comments([]);
								var comments = get_comments(handid, pageNumber, pageSize);
								$.each(comments, function(i, v){
									viewModel.comments.push(new CommentModel(v));
								});
							}
						});
			    	}
			    	
			    },
			    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
			    }
		};//pagination
		
		//将服务器的日期格式转成本地的
		function format_time(origin_time){
			if(origin_time){
				return origin_time.split('T')[0];
			}else{
				return null;
			}
				
		}
		
	</script>
	<script id="boxTem" type="text/template">
<div id="r{{handid}}">
	<form id="commit" action="course/comment-homework.action">
	<textarea name="comment.content"></textarea>
	<input name="comment.handin.id" value="{{handid}}" type="hidden" />
	<input name="comment.person.id" value="<s:property value='currentPersonId'/>" type="hidden"/>
	<p><button class="btn" type="submit">发表评论</button></p>
	</form>
</div>
</script>
</body>
</html>